<template>
  <div class="ps_w_h_100">
    <dv-border-box1>
      <div style="position: absolute; top: 20px; right: 20px; z-index: 999">
        <select class="chart-select" v-model="type" @change="chooseMap">
          <option value="china">中国地图</option>
          <option value="world">世界地图</option>
        </select>
      </div>
      <ps-chart3 :option="option"></ps-chart3>
    </dv-border-box1>
  </div>
</template>
<script setup>
import { getSalesBoardXsdqWorld } from "@/api/visual/salesBoard";
import { fontSize } from "@/utils/globalMethod.js";
const props = defineProps({
  map: {
    type: String,
    default: "",
  },
});
const type = ref("world");
const emits = defineEmits(["update:modelValue", "selected"]);
let dataList = ref([]);
let nameMap = {
  Afghanistan: "阿富汗",
  Albania: "阿尔巴尼亚",
  Algeria: "阿尔及利亚",
  Angola: "安哥拉",
  "Antigua and Barbuda": "安提瓜和巴布达",
  Argentina: "阿根廷",
  Armenia: "亚美尼亚",
  Australia: "澳大利亚",
  Austria: "奥地利",
  Azerbaijan: "阿塞拜疆",
  Bahamas: "巴哈马",
  Bahrain: "巴林",
  Bangladesh: "孟加拉国",
  Barbados: "巴巴多斯",
  Belarus: "白俄罗斯",
  Belgium: "比利时",
  Belize: "伯利兹",
  Benin: "贝宁",
  Bhutan: "不丹",
  Bolivia: "玻利维亚多民族国",
  "Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
  Botswana: "博茨瓦纳",
  Brazil: "巴西",
  "Brunei Darussalam": "文莱达鲁萨兰国",
  Bulgaria: "保加利亚",
  "Burkina Faso": "布基纳法索",
  Burundi: "蒲隆地",
  "Cabo Verde": "佛得角",
  Cambodia: "柬埔寨",
  Cameroon: "喀麦隆",
  Canada: "加拿大",
  "Central African Rep.": "中非共和国",
  Chad: "乍得",
  Chile: "智利",
  China: "中国",
  Colombia: "哥伦比亚",
  Comoros: "科摩罗",
  Congo: "刚果",
  "Costa Rica": "哥斯达黎加",
  "Côte d’Ivoire": "科特迪瓦",
  Croatia: "克罗地亚",
  Cuba: "古巴",
  Cyprus: "塞浦路斯",
  "Czech Rep.": "捷克",
  "Dem. Rep. Korea": "朝鲜",
  "Dem. Rep. Congo": "刚果民主共和国",
  Denmark: "丹麦",
  Djibouti: "吉布提",
  "Dominican Rep.": "多米尼加共和国",
  Ecuador: "厄瓜多尔",
  Egypt: "埃及",
  "El Salvador": "萨尔瓦多",
  "Eq. Guinea": "赤道几内亚",
  Eritrea: "厄立特里亚",
  Estonia: "爱沙尼亚",
  Swaziland: "斯威士兰",
  Ethiopia: "埃塞俄比亚",
  Fiji: "斐济",
  Finland: "芬兰",
  France: "法国",
  Gabon: "加蓬",
  Gambia: "冈比亚",
  Georgia: "格鲁吉亚",
  Germany: "德国",
  Ghana: "加纳",
  Greece: "希腊",
  Grenada: "格林纳达",
  Guatemala: "危地马拉",
  Guinea: "几内亚",
  "Guinea-Bissau": "几内亚比绍",
  Guyana: "圭亚那",
  Haiti: "海地",
  Honduras: "洪都拉斯",
  Hungary: "匈牙利",
  Iceland: "冰岛",
  India: "印度",
  Indonesia: "印度尼西亚",
  Iran: "伊朗伊斯兰共和国",
  Iraq: "伊拉克",
  Ireland: "爱尔兰",
  Israel: "以色列",
  Italy: "意大利",
  Jamaica: "牙买加",
  Japan: "日本",
  Jordan: "约旦",
  Kazakhstan: "哈萨克斯坦",
  Kenya: "肯尼亚",
  Kiribati: "基里巴斯",
  Kuwait: "科威特",
  Kyrgyzstan: "吉尔吉斯斯坦",
  "Lao PDR": "老挝",
  Latvia: "拉托维亚",
  Lebanon: "黎巴嫩",
  Lesotho: "莱索托",
  Liberia: "利比里亚",
  Libya: "利比亚",
  Lithuania: "立陶宛",
  Luxembourg: "卢森堡",
  Madagascar: "马达加斯加",
  Malawi: "马拉维",
  Malaysia: "马来西亚",
  Maldives: "马尔代夫",
  Mali: "马里",
  Malta: "马耳他",
  Mauritania: "毛里塔尼亚",
  Mauritius: "毛里求斯",
  Mexico: "墨西哥",
  "Micronesia (Federated States of)": "密克罗尼西亚联邦",
  Mongolia: "蒙古",
  Montenegro: "黑山",
  Morocco: "摩洛哥",
  Mozambique: "莫桑比克",
  Myanmar: "缅甸",
  Namibia: "纳米比亚",
  Nepal: "尼泊尔",
  Netherlands: "荷兰",
  "New Zealand": "新西兰",
  Nicaragua: "尼加拉瓜",
  Niger: "尼日尔",
  Nigeria: "尼日利亚",
  Norway: "挪威",
  Oman: "阿曼",
  Pakistan: "巴基斯坦",
  Panama: "巴拿马",
  "Papua New Guinea": "巴布亚新几内亚",
  Paraguay: "巴拉圭",
  Peru: "秘鲁",
  Philippines: "菲律宾",
  Poland: "波兰",
  Portugal: "葡萄牙",
  Qatar: "卡塔尔",
  Korea: "韩国",
  Moldova: "摩尔多瓦共和国",
  Macedonia: "前南斯拉夫的马其顿共和国",
  Romania: "罗马尼亚",
  Russia: "俄罗斯",
  Rwanda: "卢旺达",
  "Saint Lucia": "圣卢西亚",
  "Saint Vincent and the Grenadines": "圣文森特和格林纳丁斯",
  Samoa: "萨摩亚",
  "Sao Tome and Principe": "圣多美和普林西比",
  "Saudi Arabia": "沙特阿拉伯",
  Senegal: "塞内加尔",
  Serbia: "塞尔维亚",
  Seychelles: "塞舌尔",
  "Sierra Leone": "塞拉利昂",
  Singapore: "新加坡",
  Slovakia: "斯洛伐克",
  Slovenia: "斯洛文尼亚",
  "Solomon Islands": "所罗门群岛",
  Somalia: "索马里",
  "South Africa": "南非",
  "S. Sudan": "南苏丹",
  Spain: "西班牙",
  "Sri Lanka": "斯里兰卡",
  Sudan: "苏丹",
  Suriname: "苏里南",
  Sweden: "瑞典",
  Switzerland: "瑞士",
  Syria: "阿拉伯叙利亚共和国",
  Tajikistan: "塔吉克斯坦",
  Thailand: "泰国",
  "Timor-Leste": "东帝汶",
  Togo: "多哥",
  Tonga: "汤加",
  "Trinidad and Tobago": "特立尼达和多巴哥",
  Tunisia: "突尼斯",
  Turkey: "土耳其",
  Turkmenistan: "土库曼斯坦",
  Uganda: "乌干达",
  Ukraine: "乌克兰",
  "United Arab Emirates": "阿拉伯联合酋长国",
  "United Kingdom": "英国",
  Tanzania: "坦桑尼亚联合共和国",
  "United States": "美国",
  Uruguay: "乌拉圭",
  Uzbekistan: "乌兹别克斯坦",
  Vanuatu: "瓦努阿图",
  Venezuela: "委内瑞拉玻利瓦尔共和国",
  Vietnam: "越南",
  Yemen: "也门",
  Zambia: "赞比亚",
  Zimbabwe: "津巴布韦",
};
const chooseMap = () => {
  if (type.value === "world") {
    option.value.series[0].map = "world";
  } else {
    option.value.series[0].map = "china";
  }
  emits("map-loaded", type.value);
};
const option = computed(() => ({
  title: {
    text: "客户销售分布",
    left: 16,
    top: 16,
    textStyle: {
      color: "#fff",
      fontSize: fontSize(0.16),
    },
  },
  visualMap: {
    x: "left",
    y: "bottom",
    min: 0,
    max: Math.max(...dataList.value.map((item) => item.value), 0),
    text: ["高", "低"],
    realtime: false,
    calculable: true,
    inRange: {
      color: ["#0a2b43", "#ff9985", "#f57567", "#e64546", "#cf2121", "#c00000"],
    },
    left: "5%",
    top: "50%",
    textStyle: {
      color: "#fff",
    },
  },
  tooltip: {
    trigger: "item",
    backgroundColor: "rgba(10, 25, 50, 0.85)",
    borderColor: "rgba(64, 164, 255, 0.7)",
    borderWidth: 1,
    textStyle: {
      color: "#e0f0ff",
      fontSize: fontSize(0.12),
    },
    formatter: function (params) {
      return `<b>${
        params.name
      }</b><br/>销售金额: <span style="color:#4facfe;font-weight:bold">${
        params.value || 0
      }</span>`;
    },
  },
  geo: {
    name: "世界",
    type: "map",
    map: "world",
    label: {
      show: false,
    },
    itemStyle: {
      borderColor: "rgba(41, 102, 165, 0.8)",
      borderWidth: 1,
      areaColor: "rgba(10, 40, 80, 0.5)",
    },
    top: "12%",
    roam: true, // 启用缩放和平移
    scaleLimit: {
      min: 1.1, // 最小缩放比例（默认显示比例）
      max: 5, // 最大缩放比例（地图可以放大到原始大小的 5 倍）
    },
  },
  series: [
    {
      name: "世界",
      type: "map",
      map: "world",
      data: dataList.value,
      nameMap: nameMap,
      label: {
        show: false,
      },
      itemStyle: {
        borderColor: "rgba(41, 102, 165, 0.8)",
        borderWidth: 1,
        areaColor: "rgba(10, 40, 80, 0.5)",
      },
      top: "12%",
      roam: true, // 启用缩放和平移
      scaleLimit: {
        min: 1.1, // 最小缩放比例（默认显示比例）
        max: 5, // 最大缩放比例（地图可以放大到原始大小的 5 倍）
      },

      emphasis: {
        label: {
          show: false,
        },
        itemStyle: {
          areaColor: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              { offset: 0, color: "rgba(58, 175, 255, 0.5)" },
              { offset: 1, color: "rgba(58, 175, 255, 0.8)" },
            ],
          },
          shadowColor: "rgba(58, 175, 255, 0.8)",
          shadowBlur: 20,
        },
      },
      select: {
        itemStyle: {
          areaColor: "#3db7e4",
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
    },
    {
      name: "中国标记",
      type: "effectScatter",
      coordinateSystem: "geo",
      symbol:
        "image://",
      symbolSize: 10,
      tooltip: {
        show: false,
      },
      data: [
        {
          name: "中国",
          value: [110.1954, 36.8617],
        },
      ],
      itemStyle: {
        color: "#FFDE00",
      },
      label: {
        show: false,
        formatter: "{b}",
        position: "right",
        color: "#FFDE00",
        fontSize: fontSize(0.14),
        fontWeight: "bold",
      },
      zlevel: 10,
    },
  ],
}));
const loadData = async () => {
  const { data } = await getSalesBoardXsdqWorld();
  dataList.value = data;
};
onMounted(loadData);
</script>

<style scoped lang="scss">
:deep(.border-box-content) {
  padding: 0 15px 10px;
}
</style>
